<template>
  <div class="header">
    <div class="left-side">
      <div class="page-title-wrapper">
        <h1 class="pagetitle__title">全国空气质量</h1>
        <h2 class="pagetitle__subtitle">
          全国空气质量指数（AQI）和PM2.5空气污染情况
        </h2>
        <p class="timestamp__wrapper">最后更新于{{ currentTime }}</p>
      </div>
    </div>

    <div class="right-side">
      <el-button type="primary" style="
    background-color: #49739a;" @click="refresh">刷新页面</el-button>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      currentTime: "",
    };
  },
  mounted() {
    this.getNowDate();
  },
  methods: {
    getNowDate() {
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      this.currentTime = " " + year + "年" + month + "月" + day + "日";
    },
    refresh() {
      location.reload();
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 1440px;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 24px;
  margin-right: auto;
  margin-left: auto;

  .page-title-wrapper {
    .pagetitle__title {
      font-weight: 700;
      font-size: 42px;
      margin-bottom: 6px;
      line-height: normal;
    }

    .pagetitle__subtitle {
      font-weight: 400;
      opacity: 0.9;
      font-size: 18px;
      line-height: 1.44;
      margin-bottom: 9px;
    }

    .timestamp__wrapper {
      color: #516072;
      font-size: 12px;
      height: 22px;
      line-height: 1.5;
    }
  }
  .right-side{
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    display: flex;
  }
}

</style>